import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Image, Text, Navigator } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/home'
import { Search, Loading } from '@components'
import { getWindowHeight } from '@utils/style'
import Banner from './banner'
import Policy from './policy'
import Module from './module'

import './home.scss'

@connect(state => state.home, actions)
class Home extends Component {

  config = {
    navigationBarTitleText: '寻木居',
    enablePullDownRefresh: true,
    backgroundTextStyle: 'dark'
  }

  constructor () {
    super(...arguments)
  }

  state = {
    loading: true
  }

  componentWillReceiveProps (nextProps) {
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  componentDidMount() {
    this.loadHome()
  }

  onShareAppMessage () { }

  onPullDownRefresh() {
    this.loadHome()
    Taro.stopPullDownRefresh()
  }

  loadHome() {
    this.props.dispatchHome().then(() => {
      this.setState({ loading: false })
    })
  }

  render () {
    const { homeInfo } = this.props
    const { bannerList, policyList, moduleList, kingkongList } = homeInfo

    if (this.state.loading) {
      return <Loading />
    }

    return (
      <View className='home'>
        <ScrollView
          scrollY
          className='home__wrap'
          style={{ height: getWindowHeight() }}
        >
        <View>
          <Search />

          <Banner list={bannerList} />
          <Policy list={policyList} />

          {
            (kingkongList && kingkongList.length > 0)  &&
            <View className='home__grid'>
              {
                kingkongList.map((item, index) => (
                  <Navigator key={index} className='home__grid-item'>
                    <Image className='home__grid-img' src={item.iconUrl} url={item.linkUrl} />
                    <Text className='home__grid-txt'>{item.name}</Text>
                  </Navigator>
                ))
              }
            </View>
          }

          <Module list={moduleList} />

        </View>
        </ScrollView>
      </View>
    )
  }
}

export default Home
